<template>
	<div class="home-box" ref="bodyScroll" :style="{'background-size': '100%','background-image' : skinInfo.backImg ? 'url('+ skinInfo.backImg+')': (skinInfo.backColor ? skinInfo.backColor : '#FFFFFF')}" @scroll="handleScroll" id="scroll-container">
		<div class="top-wrap">
			<Header v-if="isZxjtAppHeader" :headerObj = 'headerObj' />
			<header v-if="isHeader">
				<div class="icon-box" @click="closeZxjtqhWebview">
					<van-icon name="arrow-left" size="1.2rem" color="#333333"/>
				</div> 				
				<p>中信建投</p>				
			</header>
			<div ref="componentHeight">
				<zxjtBanber ref="banner" />
				<!-- 个人中心 -->
				<personalCenter />
				<!-- 直播预告 -->
				<liveBroadcastPreview />
				<!-- 我正在追 -->
				<chasing ref="chasing" />
				<!-- 视频推荐 -->
				<div style="clear: both"></div>
				<videoRecommendation ref="videoRecommendation" />
				<!-- 付费课程 -->
				<CourseBlock />
			</div>
			<!-- 系列课程 -->
			<div style="clear: both" ></div>
			<series-cslassroom ref="seriesCslassroom" :scrollDistance="scrollDistance" @scrollToone="handleScrollone" :totalheight="totalheight"></series-cslassroom>
		</div>
	</div>

</template>

<script>
	import zxjtBanber from './homeComponents/banner.vue'
	import chasing from './homeComponents/chasing.vue'
	import videoRecommendation from './homeComponents/videoRecommendation.vue'
	import seriesCslassroom from './homeComponents/seriesCslassroom.vue'
	import liveBroadcastPreview from './homeComponents/liveBroadcastPreview.vue'
	import liveBroadcastMore from './homeComponents/liveBroadcastMore.vue'
	import personalCenter from './homeComponents/personalCenter.vue'
	import CourseBlock from './homeComponents/CourseBlock.vue'
	import wxApi from "@/util/wxApi";
	import { dotNum } from '@/util/api.js'
	export default {
		mixins: [wxApi],
		components: {
			zxjtBanber, //轮播图
			chasing, //正在追
			videoRecommendation, // 视频推荐
			seriesCslassroom, //推荐课堂
			liveBroadcastPreview, //直播预告
			liveBroadcastMore, //直播预告更多
			personalCenter, //个人中心标题
			CourseBlock, // 付费课程
		},
		data() {
			return {
				headerObj: {
					'isShowBack': true,
					'isShowClose': false,
					'isShowMine': false,
					'fromType': 'home',
					'titleText': '财经直播',
					'color': '#6B6B6B'
				},
				scrollTop: 0,
				shareInfoData: {}, //分享信息
				isHeader:false,
				isZxjtAppHeader:false,
				scrollDistance: 0,
				skipData:0,
				totalheight:0,
			};
		},
		created() {
			dotNum('home_page')
			if(window.terminal.isZxjtqhApp){
                this.isHeader = true
			}
			if(window.terminal.isZxjtApp && this.$store.state.appVersionBoolean){//版本高于8.2.2
                this.isZxjtAppHeader = true
			}
			window.scrollTo({  
				top: 860,  
				behavior: 'smooth'  
			});
		},
		mounted: function() {
			setTimeout(() => {  
				this.totalheight = this.getTotalHeight();  
			}, 1000); // 1秒后执行，根据实际情况调整延迟时间 
			this.homeDot()//中信建投首页埋点
		},
		beforeRouteLeave(to, form, next) {
			this.scrollTop = this.$refs.bodyScroll.scrollTop;
			next();
		},
		activated() {
			this.$refs.bodyScroll.scrollTop = this.scrollTop;
		},
		methods: {
			getTotalHeight() {  
    			if(this.$refs.componentHeight) {  
            		return this.$refs.componentHeight.offsetHeight;    
        		}    
  			},
			handleScrollone(targetPosition){
				
				// 获取当前元素的滚动容器  
				const scrollContainer = this.$refs.bodyScroll;  
				
				// 检查滚动容器是否存在  
				if (scrollContainer) {  
					// 滚动到目标位置，实现平滑滚动效果  
					scrollContainer.scrollTo({ top: targetPosition, behavior: 'smooth' });  
				} else {  
					console.error('未能获取到滚动容器');  
				} 
			},
			handleScroll(event) {  
				if (this.throttleTimer) {  
					clearTimeout(this.throttleTimer);  
				}
				 // 设置新的定时器  
				this.throttleTimer = setTimeout(function() {  
					this.scrollDistance = this.$refs.bodyScroll.scrollTop; 
				}.bind(this), 100); // 这里的500是节流的时间间隔，单位是毫秒，你可以根据需要进行调整
			},
			closeZxjtqhWebview(){
				fun.closeZxjtqhWebview()
			},
			geren() {
				// zxjt/mine
				this.$router.push({
					// 跳转个人中心
					path: `/${this.$channel}/mine`,
				});
			},
			wxRegCallback() {
				const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};
				const {name,icon} = this.$store.state.SysOrgInfo || {};
				let opstion = {
					link:fun.getCurPageUrl('home'),
					title: shareTitle || '【' + name + '】一起来看直播吧！', // 分享标题
					desc: shareDesc || "精彩直播，尽在" + name + "手机直播！", //分享描述
					imgUrl: shareIcon || icon,
					success: function() {
					},
					error: function(e) {
					}
				};
				this.ShareTimeline(opstion);
			},
			//中信建投首页埋点
			homeDot() {
				if (this.$channel !== 'zxjt') return
				setTimeout(() => {
					$sensorsTrack('liveBroadcast_homepageView', {});
					console.log("首页埋点");
				}, 300);
			},
		},
		computed: {
			isLoadIcon() {
				if(this.$store.state.SysOrgInfo.icon) {
					this.wxRegister(this.wxRegCallback);
					return true
				} else {
					return false
				}
			},
			skinInfo() {
				return this.$store.state.skinStoreInfo
			},
		},
		watch: {
            isLoadIcon(val, oldVal) {},
		}
	};
</script>
<style scoped="scoped" lang="less">
    header{
		width: 100%;
		height: 88px;
		background-color: transparent;
		text-align: center;
		line-height: 88px;
		font-size: 32px;
		color: #333333;
		position: relative;
        .icon-box{
			width: 80px;
			height: 88px;
			position: absolute;
			left: 0px;
			top:0px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.home-box {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.top-wrap {
		width: 100%;
		/* min-height: calc(100vh - 96px); */
		background-size: 100% 100% !important;
		background-repeat: repeat-y !important;
	}

	.list-fot {
		padding-left: 30px;
	}

	.pageNodes {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 28px;
		color: #C4C4C4;
		background: rgb(244, 244, 244)
	}

	.h-card {
		background: transparent;
		box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.05);
		padding-top: 20px;
	}

	.h-trailer,
	.h-ing {
		margin-bottom: 10px;
	}

	.h-t-title.h-t-more {
		width: 670px;
	}

	.icon-youjiantou1 {
		color: #c5c5c5 !important;
	}

	.h-great-tab {
		display: flex;
	}

	.h-great-tab {
		display: flex;
		padding: 0 50px;
	}

	.h-g-tab-item {
		position: relative;
		font-size: 28px;
		color: rgba(51, 51, 51, 1);
		padding: 0px 30px 25px 30px;
		margin-top: 45px;
	}

	.h-g-tab-item.active::after {
		content: '';
		width: 36px;
		height: 4px;
		position: absolute;
		top: 46px;
		left: 50%;
		transform: translateX(-50%);
		background: #FF3B30;
	}

	.active {
		color: #F35757;
	}

	.gs-box {
		width: 100%;
		height: 88px;
		position: relative;
	}

	.gs-box p {
		color: #647381;
		font-size: 32px;
		text-align: center;
		line-height: 88px;
	}

	.gs-box .back {
		width: 22px;
		height: 22px;
		position: absolute;
		top: 30px;
		left: 30px;
		transform: rotate(45deg);
		border-bottom: 2px solid #647381;
		border-left: 2px solid #647381;
	}

	.top-logo {
		width: 750px;
		height: 95px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-logo img {
		height: 100%;
		width: 750px;
		background: salmon;
	}

	/* 扫码 */
	.scan-code-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 56px;
		padding: 0 10px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 33px;
		position: absolute;
		bottom: 35px;
		right: 35px;
	}

	.scan-code-box img {
		height: 30px;
		width: 30px;
		margin-right: 2px;
	}

	.scan-code-box span {
		font-size: 28px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
</style>
